/*This is the Main Product Grid and all things in it - products, etc*/
#main-products  {
    display: grid;
    height: 100%;
    width: 95%;
    grid-gap: 10px;
    margin: auto;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.75fr 1.5fr 1.5fr 1.5fr 0.75fr;
    grid-template-areas:
        "main-title main-title main-title main-title main-title"
        "products1 products1 products1 products1 products1"
        "products2 products2 products2 products2 products2"
        "products3 products3 products3 products3 products3"
        "more more more more more"
}

#main-products .main-title  {
    grid-area: main-title;
    align-content: center;
    text-align: center;
}

#main-products .products1  {
    grid-area: products1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle productTitle productTitle productTitle productTitle"
       "singleGrid singleGrid singleGrid singleGrid singleGrid"
}

#main-products .products2  {
    grid-area: products2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle2 productTitle2 productTitle2 productTitle2 productTitle2"
       "singleGrid2 singleGrid2 singleGrid2 singleGrid2 singleGrid2"
}

#main-products .products3  {
    grid-area: products3;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle3 productTitle3 productTitle3 productTitle3 productTitle3"
       "singleGrid3 singleGrid3 singleGrid3 singleGrid3 singleGrid3"
}

#main-products .more  {
    grid-area: more;
    align-content: center;
    text-align: center;
}



.productTitle  {
    grid-area: productTitle;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid {
    text-align: center;
    grid-area: singleGrid;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid .single1  {
    grid-area: single1;
    height: auto;
    align-content: center;
}

#singleGrid .single2  {
    grid-area: single2;
    background-color: pink;
    height: auto;
    align-content: center;
}

#singleGrid .single3  {
    grid-area: single3;
    background-color: pink;
    height: auto;
    align-content: center;
}

#singleGrid .single4  {
    grid-area: single4;
    background-color: pink;
    height: auto;
    align-content: center;
}

#singleGrid .single5  {
    grid-area: single5;
    background-color: #D3D3D3;
    height: auto;
    align-content: center;
}






.productTitle2  {
    grid-area: productTitle2;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid2 {
    grid-area: singleGrid2;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid2 .single1  {
    grid-area: single1;
    background-color: pink;
    height: auto;
}

#singleGrid2 .single2  {
    grid-area: single2;
    background-color: pink;
    height: auto;
}

#singleGrid2 .single3  {
    grid-area: single3;
    background-color: pink;
    height: auto;
}

#singleGrid2 .single4  {
    grid-area: single4;
    background-color: pink;
    height: auto;
}

#singleGrid2 .single5  {
    grid-area: single5;
    background-color: #D3D3D3;
    height: auto;
}












.productTitle3  {
    grid-area: productTitle3;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid3 {
    grid-area: singleGrid3;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid3 .single1  {
    grid-area: single1;
    background-color: pink;
    height: auto;
}

#singleGrid3 .single2  {
    grid-area: single2;
    background-color: pink;
    height: auto;
}

#singleGrid3 .single3  {
    grid-area: single3;
    background-color: pink;
    height: auto;
}

#singleGrid3 .single4  {
    grid-area: single4;
    background-color: pink;
    height: auto;
}

#singleGrid3 .single5  {
    grid-area: single5;
    background-color: #D3D3D3;
    height: auto;
}



#main-products a {
    display: block;
    background-color: #ffd500;
    box-shadow: 0 0 20px gray;
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
    text-decoration: none;
}

#main-products a:hover {
  background-color: #ffed8f;
  color: #333;
  padding: 2px 2px;
  border: none;
  cursor: pointer;
}